<template>
  <div>
    <a-row>
      <a-col :span="6">
        <a-form-item label="评论内容" :wrapper-col="{ span: 16 }" name="type">
          <a-input
            v-model:value="queryData.criticizeContent"
            placeholder="请输入帖子标题"
          />
        </a-form-item>
      </a-col>

      <a-col :span="6"> </a-col>
      <a-col :span="6"></a-col>
      <a-col :span="6">
        <a-button @click="reset" style="margin-left: 20px">重置</a-button>
        <a-button
          style="margin: 0 20px; background-color: #6a2c70"
          type="primary"
          @click="queryList"
          >查询</a-button
        >
      </a-col>
    </a-row>

    <a-table
      tableLayout="fixed"
      :columns="columnsNotice"
      :data-source="criticizeList.data"
      :loading="isloading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'index'">
          {{
            queryData.page == 1
              ? index + 1
              : (queryData.page - 1) * queryData.pageSize + index + 1
          }}
        </template>
        <template v-if="column.key === 'postTitle'">
          <a-tooltip>
            <template #title>{{ record.forum?.postTitle }}</template>
            <div class="hidden">{{ record.forum?.postTitle }}</div>
          </a-tooltip>
        </template>
        <template v-if="column.key === 'criticizeContent'">
          <a-tooltip>
            <template #title>{{ record.criticize.criticizeContent }}</template>
            <div class="hidden">{{ record.criticize.criticizeContent }}</div>
          </a-tooltip>
        </template>
        <template v-if="column.key === 'name'">
          {{ record.employee.name }}
        </template>
        <template v-if="column.key === 'like'">
          <a-switch
            @change="handleChange(record)"
            v-model:checked="record.like"
            checked-children="取消"
            un-checked-children="点赞"
          />
        </template>
        <template v-if="column.key === 'createTime'">
          {{ stringSlicing(record.criticize.createTime) }}
        </template>
        <template v-if="column.key === 'action'">
          <a-popconfirm
            title="确认删除此评论吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="deleteCommnet(record)"
          >
            <a-button
              v-if="record.forum.postStatus != 4"
              type="primary"
              style="background-color: #f38181"
              danger
              >删除</a-button
            >
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { userUserStore } from '@/stores/UserStore'
import { columnsNotice } from './columns'
import { apiGetComments, apiDeleteComment } from '@/api/Forum/api'
import { PaginationModel } from '@/api/config/Model'
import { message } from 'ant-design-vue'
import { apiDropLike } from '@/api/Forum/api'
const store = userUserStore()
const userInfo: any = ref({})
const queryData = reactive<any>({
  criticizeContent: null,
  userId: null,
  page: 1,
  pageSize: 10,
})

const criticizeList = reactive({
  data: [],
})
const pagination = ref<PaginationModel>({
  current: 1,
  total: 100,
  pageSize: 10, //每页中显示10条数据
  pageSizeOptions: ['10', '20', '30'],
})

// 删除
const deleteCommnet = async (item: any) => {
  try {
    await apiDeleteComment(item.criticize.criticizeId)
    message.success('删除成功')
  } catch (error) {
    message.error('删除失败')
  }
  getCommentList()
}

const handleChange = async (item: any) => {
  try {
    await apiDropLike({
      isLike: item.like,
      criticizeId: item.criticize.criticizeId,
      userId: userInfo.value.empId,
      Type: 2,
    })
    message.success('操作成功')
  } catch (error) {
    message.error('操作失败')
  }
}
const isloading = ref<boolean>(false)
const reset = () => {
  Object.keys(queryData).forEach((key) => delete queryData[key])
  queryData.page = 1
  queryData.pageSize = 10
  queryData.userId = userInfo.value.empId
  getCommentList()
}
const queryList = () => {
  getCommentList()
}

const stringSlicing = (str: string) => {
  return str.split('T')[0] + ' ' + str.split('T')[1]
}
//获取评论列表
const getCommentList = async () => {
  isloading.value = true
  try {
    let res = await apiGetComments(queryData)
    criticizeList.data = res.data.records
    pagination.value.current = res.data.current
    pagination.value.pageSize = res.data.size
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('获取列表失败')
  }
  isloading.value = false
}

// 分页改变
const handleTableChange = (page: any) => {
  pagination.value.current = page.current
  pagination.value.pageSize = page.pageSize
  queryData.page = page.current
  queryData.pageSize = page.pageSize
  getCommentList()
}

onMounted(() => {
  userInfo.value = store.employeeInfo
  queryData.userId = userInfo.value.empId
  getCommentList()
})
</script>

<style lang="less" scoped></style>
